import * as echarts from "echarts";
import icon12 from "@/assets/imgs/icon-hom1/icon-12.webp";
import iconBarTop from "@/assets/imgs/icon-bar-top.svg";
// import icon11 from "@/assets/imgs/icon-hom1/icon-11.webp";
import { useCommonStore } from "@/stores/common";
const { setGlobalData } = useCommonStore();
export const barChart = () => {
  const data = [
    { label: "独居", value: "8652" },
    { label: "空巢", value: "7584" },
    { label: "与子女同住", value: "6523" },
    { label: "其他", value: "5478" },
  ];
  const d = data.map((item) => item.label);
  const v = data.map((item) => item.value);

  let dataZoomMove = {
    start: 0,
    end: 5,
  };
  let dataZoomMoveTimer = null;
  let option = {
    grid: {
      bottom: "0%",
      left: "0%",
      top: "10%",
      right: "0%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "category",
        data: d,
        inverse: true,
        axisLabel: {
          inside: true,
          verticalAlign: "bottom",
          lineHeight: 36,
          margin: 2, //刻度标签与轴线之间的距离
          color: "#D8F0FF",
          fontSize: 14,
          fontWeight: 400,
          formatter: function (value) {
            if (value !== undefined) {
              if (value.length > 9) {
                // 超出5个字符显示省略号
                return `${value.slice(0, 9)}...`;
              }
              return value;
            }
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: "category",
        data: d,
        inverse: true,
        axisLabel: {
          inside: true,
          verticalAlign: "bottom",
          lineHeight: 34,
          margin: 2,
          formatter: function (value) {
            let k = d.indexOf(value);
            let index = k;
            return `{a|${v[index]}}`;
          },
          rich: {
            a: {
              color: "#D8F0FF",
              fontSize: "14",
              fontWeight: 500,
              padding: [4, 0, 0, 0],
              fontFamily: "DOUYU",
            },
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        data: v,
        type: "bar",
        barWidth: 4,
        showBackground: true,
        backgroundStyle: {
          color: "#242A36",
          borderRadius: 50,
        },
        itemStyle: {
          borderRadius: 50,
          color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            { offset: 0, color: "#10274B" },
            { offset: 1, color: "#1978E5" },
          ]),
        },
      },
    ],
  };
  return option;
};

export const barChartTwo = () => {
  const payload = {
    id: "",
    data: {
      title: ["各区老年人户籍人口"],
      x: [
        "玄武区",
        "秦淮区",
        "建邺区",
        "鼓楼区",
        "栖霞区",
        "雨花台",
        "江宁区",
        "浦口区",
        "六合区",
        "溧水区",
        "高淳区",
        "江北新区",
      ],
      data1: [662, 483, 784, 900, 432, 90, 60, 20, 80, 100, 40, 34],
    },
  };

  const x = payload.data.x || [];
  const data1 = payload.data.data1 || [];
  const title = payload.data.title || [];

  const option = {
    grid: {
      top: 35,
      left: 15,
      right: 15,
      bottom: 20,
      // 是否包含文本
      containLabel: true,
    },
    // tooltip: {
    //   // 触发类型  经过轴触发axis  经过轴触发item
    //   trigger: "axis",
    //   backgroundColor: "rgba(9, 30, 60, 0.6)",
    //   extraCssText: "box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;",
    //   borderWidth: 0,
    //   confine: false,
    //   appendToBody: true,
    //   textStyle: {
    //     color: "#fff",
    //     fontSize: 10,
    //   },
    //   // 轴触发提示才有效
    //   axisPointer: {
    //     type: "shadow",
    //   },
    //   shadowStyle: {
    //     color: "rgba(157, 168, 245, 0.1)",
    //   },

    //   formatter: (data) => {
    //     const item = data.filter((item) => item.seriesType == "bar")[0] || {};
    //     return `
    //       <div>
    //         <p>${item.name}</p>
    //         <p>${item.seriesName}:${item.value}</p>
    //       </div>
    //     `;
    //   },
    // },
    xAxis: {
      data: x,
      axisLine: {
        lineStyle: {
          type: "solid",
          color: "#4176a3",
          width: "0.5", //坐标线的宽度
        },
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: "#fff", //底部文字颜色
          fontSize: 12,
        },
      },
    },
    yAxis: [
      {
        nameTextStyle: {
          align: "left",
          fontSize: 11,
          color: "#4176a3",
        },
        type: "value",
        axisLine: {
          show: false,
          lineStyle: {
            color: "transparent", //左边框颜色
          },
        },
        splitLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          show: true,
          fontSize: 12,
          textStyle: {
            color: "#ADD6FF", //左文字颜色
          },
        },
      },
    ],
    series: [
      {
        name: title[0],
        type: "bar",
        barWidth: 20,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(21,136,209,0)",
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#1978e51a", //渐变1
            },
            {
              offset: 1,
              color: "#1978e5", //渐变2
            },
          ]),
        },
        data: data1,
        z: 0,
        zlevel: 0,
      },
      {
        type: "pictorialBar",
        itemStyle: {
          color: "#166ED1", //数据的间隔颜色
        },
        symbolRepeat: "true",
        symbolMargin: 1,
        symbol: "rect",
        symbolSize: [20, 4],
        data: data1,
        z: 1,
        zlevel: 0,
        label: {
          show: true,
          position: "top",
          fontSize: 14,
          color: "#fff", //柱状顶部文字颜色
          formatter: function (params) {
            return params.data;
          },
        },
      },
    ],
  };

  return option;
};

export const lineChartOne = () => {
  let rq = [2020, 2021, 2022, 2023, 2024];
  let seriesArr = [];
  let list = [
    {
      name: "户籍老人",
      children: [88, 88, 99, 100, 80],
    },
    {
      name: "常住老人",
      children: [35, 30, 30, 25, 25],
    },
  ];
  let colorArr = ["7, 201, 242", "23, 117, 224"];
  list.forEach((val, index) => {
    seriesArr.push({
      name: val.name,
      type: "line",
      symbolSize: 6,
      symbol: 'none',
      smooth: true,// 平滑曲线
      data: val.children,
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: `rgba(${colorArr[index]},.2)`,
              },
              {
                offset: 1,
                color: "rgba(255, 255, 255,0)",
              },
            ],
            false
          ),
        },
      },
      itemStyle: {
        normal: {
          color: `rgb(${colorArr[index]})`,
        },
      },
      lineStyle: {
        normal: {
          width: 2,
          shadowColor: `rgba(${colorArr[index]}, .2)`,
          shadowBlur: 4,
          shadowOffsetY: 25,
        },
      },
    });
  });
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "rgba(255,255,255,.5)",
        },
      },
      backgroundColor: "rgba(33, 51, 67, 1)",
      borderColor: "rgba(255,255,255,0)",
      textStyle: {
        color: "#fff",
      },
    },
    legend: {
      top: 20,
      icon: "rect",
      orient: "horizontal",
      textStyle: {
        color: "#fff",
        fontSize: 12,
        fontWeight: 600,
      },
      data: list.map((val) => {
        return val.name;
      }),
    },
    grid: {
      left: "2%",
      right: "5%",
      bottom: "6%",
      top: "18%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: rq,
      boundaryGap: false,
      splitLine: {
        show: false,
      },
      axisLine: {
        show: true,
      },
      axisLabel: {
        textStyle: {
          fontSize: 12,
          color: "#D8F0FF",
          fontWeight: 600,
        },
      },
    },
    yAxis: [
      {
        type: "value",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(33, 54, 72, 1)",
            type: "dashed",
          },
        },
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: "#D8F0FF",
            fontWeight: 600,
          },
        },
        max: 100,
      },
    ],
    series: seriesArr,
  };
  return option;
};

export const barChart12 = (vdata?: any, type?: any) => {
  let columnArr = ["地区", "养老机构数量", "居家设施数量"];
  if (type == 1) {
    columnArr = ["地区", "养老机构数量", "居家设施数量"];
  } else {
    columnArr = ["地区", "设施数量", "日间照料床位数量"];
  }
  const source = [
    columnArr,
    ...vdata.map((item) => {
      return [item.label, item.value, item.value2];
    }),
  ];

  const markPoint = vdata.map((item) => {
    return {
      z: 2,
      xAxis: item.label,
      yAxis: item.value,
      type: "scatter",
      valueIndex: 0,
      symbolOffset: ["0%", "-5%"],
      symbolSize: 40,
      symbol: `image://${iconBarTop}`,
      itemStyle: {
        borderWidth: 0,
        opacity: 1,
        color: "#000",
      },
    };
  });
  const options = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "#040B15",
      borderColor: "#040B15",
      textStyle: {
        color: "rgba(255, 255, 255, 0.65)",
        fontSize: 12,
      },
    },
    // tooltip: { trigger: "axis", axisPointer: { type: "shadow" }, extraCssText: 'z-index:10' },
    grid: {
      top: 35,
      left: 15,
      right: 15,
      bottom: 20,
      // 是否包含文本
      containLabel: true,
    },
    legend: {
      textStyle: {
        color: "rgba(255, 255, 255, 0.65)",
      },
      itemWidth: 25,
      itemHeight: 4,
    },
    xAxis: {
      type: "category",
      axisPointer: {
        type: "shadow",
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: "#fff", //底部文字颜色
          fontSize: 12,
        },
      },
    },
    yAxis: [
      {
        // name: "床位数量",
        type: "value",
        axisLabel: {
          color: "rgba(255, 255, 255, 0.65)", // y 轴标注颜色
        },
        splitLine: {
          lineStyle: {
            type: "dashed", // 虚线
            color: "rgba(255, 255, 255, 0.15)",
          },
          show: false,
        },
      },
      {
        // name: "机构数量",
        type: "value",
        axisLabel: {
          formatter: "{value}",
          color: "rgba(255, 255, 255, 0.65)", // y 轴标注颜色
        },
        splitLine: {
          lineStyle: {
            type: "dashed", // 虚线
            color: "#294358",
          },
          show: true,
        },
      },
    ],
    dataset: {
      source: source,
    },
    series: [
      {
        type: "bar",
        itemStyle: {
          barBorderRadius: [30, 30, 0, 0],
          color: {
            type: "linear",
            x: 0, // 右
            y: 0, // 下
            x2: 0, // 左
            y2: 1, // 上
            colorStops: [
              {
                offset: 0,
                color: "rgba(74, 181, 238, 1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(12, 43, 68, 1)", // 100% 处的颜色
              },
            ],
          },
        },
        barWidth: 8,
        yAxisIndex: 1,
        markPoint: {
          data: markPoint,
        },
      },
      {
        type: "line",
        symbol: "rect",
        smooth: true, // 平滑曲线
        itemStyle: {
          color: "rgba(24, 117, 222, 1)",
        },
      },
    ],
  };
  return options;
};

export const Pie3d = (pieData) => {
  return {
    pieData,
    legend: {
      show: false,
    },
  };
};


export const pieChartOrg3 = (type?: number) => {
  function getActualTotal(data) {
    return data.reduce((total, item) => {
      if (item.name !== '') {  // Assuming only the separator has an empty name
        total += item.value;
      }
      return total;
    }, 0);
  }
  const colors = [
    "#05D0F9FF",
    "#187AEBFF",
    "#D0DBE1FF",
    "#E8BA65FF",

    "#6DD1EAFF",
    "#1978E5FF",
    "#ECB205FF",
    "#9C30F1FF",
    "#7BC17FFF",
    "#E8BA65FF",
  ];

  const sourceData =
    type == 1
      ? [
        {
          name: "五级",
          value: 5,
        },
        {
          name: "四级",
          value: 12,
        },
        {
          name: "三级",
          value: 24,
        },
        {
          name: "二级",
          value: 41,
        },
        {
          name: "一级",
          value: 18,
        }]
      : [
        {
          name: "五级",
          value: 4,
        },
        {
          name: "四级",
          value: 8,
        },
        {
          name: "三级",
          value: 69,
        },
        {
          name: "二级",
          value: 16,
        },
        {
          name: "一级",
          value: 3,
        }
      ];
  const total = sourceData.reduce((num, item) => {
    num += item.value;
    return num;
  }, 0);

  // 内环间隔距离
  const inSplitWidth = 3;
  // 为了实现内环间隔距离，需要额外插入的数值。200 只是个系数，值越大，单位间隔的距离越小。
  const inSplitValue = Math.floor(total / (300 / inSplitWidth));

  // 外环间隔比内环间隔大的值
  const itemSplitWidth = 2;
  // 外环间隔距离
  const outSplitWidth = inSplitWidth + itemSplitWidth;
  // 为了实现外环间隔距离，需要额外插入的数值。
  const outSplitValue = Math.floor(total / (300 / outSplitWidth));

  // 内环数据的总数
  const valueTotal = total + inSplitValue * sourceData.length;

  function getTextAngle(currentAngle, angle) {
    currentAngle = currentAngle + angle;
    if (currentAngle <= 90) {
      return -currentAngle;
    } else if (currentAngle <= 180 && currentAngle > 90) {
      return 180 - currentAngle;
    } else if (currentAngle < 270 && currentAngle > 180) {
      return 180 - currentAngle;
    } else if (currentAngle < 360 && currentAngle >= 270) {
      return 360 - currentAngle;
    }
  }

  // 内环数据。在原数据的后面添加间隔数据（间隔块设置颜色透明）
  const valueData = sourceData.reduce((arr, item) => {
    const currentTotal = arr.reduce((total, item) => {
      total += item.value;
      return total;
    }, 0);

    const currentAngle = 360 * (currentTotal / valueTotal);
    const angle = (360 * (item.value / valueTotal)) / 2;
    arr.push(
      {
        name: item.name,
        value: item.value,
        itemStyle: {},
        label: {
          lineHeight: 80,
          rotate: getTextAngle(currentAngle, angle),
        },
      },
      {
        name: "",
        value: inSplitValue,
        itemStyle: {
          color: "transparent",
          opacity: 0,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
      }
    );
    return arr;
  }, []);

  const itemReduced = outSplitValue - inSplitValue;
  // 外环数据
  const outValueData = sourceData.reduce((arr, item, index) => {
    const currentTotal = arr.reduce((total, item) => {
      total += item.value;
      return total;
    }, 0);

    const currentAngle = 360 * (currentTotal / valueTotal);
    const angle = (360 * (item.value / valueTotal)) / 2;

    arr.push(
      {
        name: item.name,
        value: item.value - itemReduced,
        label: {
          color: "rgb(160, 60, 60)",
          position: "inside",
          align: "center",
          rotate: getTextAngle(currentAngle, angle),
        },
      },
      {
        name: "",
        value: outSplitValue,
        itemStyle: {
          color: "transparent",
          opacity: 0,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        tooltip: {
          show: false,
        }
      }
    );

    return arr;
  }, []);

  const option = {
    tooltip: {
      trigger: "item",
      zlevel: 1,
      axisPointer: {
        lineStyle: {
          color: "rgba(255,255,255,.5)",
        },
      },
      backgroundColor: "rgba(33, 51, 67, 1)",
      borderColor: "rgba(255,255,255,0)",
      textStyle: {
        color: "#fff",
      },
      formatter: (params, ticket, callback) => {
        setGlobalData(params, "home1");
        if (params.name) {
          return `${params.name}:${params.value}%`;
        }
      },
    },
    color: colors,
    //图例组件
    legend: {
      show: true,
      type: "scroll",
      orient: "vertical",
      right: "3%",
      top: "center",
      icon: "diamond", //设置为圆，删除则为矩形
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 25,
      data: sourceData,
      formatter: function (name) {
        const actualTotal = getActualTotal(sourceData); // Use the actual total
        let target = 0;
        for (let i = 0; i < sourceData.length; i++) {
          if (sourceData[i].name === name) {
            target = sourceData[i].value;
            break;
          }
        }
        let percentage = (target / actualTotal) * 100;
        let arr = [
          "{rate|" + percentage.toFixed(0) + "%}",
          "{name|" + name + "}",
        ];
        return arr.join("  ");
      },
      textStyle: {
        rich: {
          name: {
            width: 120,
            fontSize: 14,
            fontWeight: 400,
            verticalAlign: "top",
            padding: [4, 0, 0, 4],
            color: "#FFB525",
            fontFamily: "Source Han Sans CN-Regular",
          },
          rate: {
            width: 70,
            fontSize: 15,
            padding: [5, 0, 0, 30],
            color: "#EDFDFF",
            fontFamily: "Source Han Sans CN",
          },
        },
      },
    },
    series: [
      {
        type: "pie",
        data: valueData,
        label: {
          show: false,
        },
        itemStyle: {
          opacity: 0.3,
        },
        labelLine: {
          show: false,
        },
        blur: {
          itemStyle: {
            opacity: 1,
          },
        },
        stillShowZeroSum: true,
        radius: ["60%", "80%"],
        center: ['25%', '50%'],
      },
      {
        type: "pie",
        startAngle: -360 * (itemReduced / 2 / valueTotal) + 90,
        radius: ["60%", "80%"],
        center: ['25%', '50%'],
        label: {
          show: false,
        },
        silent: false,
        labelLine: {
          show: false,
          length: 10,
        },
        data: outValueData,
      },
    ],
  };
  return option;
};
export const pieChartOrg6 = (type?: number) => {

  function getActualTotal(data) {
    return data.reduce((total, item) => {
      if (item.name !== '') {  // Assuming only the separator has an empty name
        total += item.value;
      }
      return total;
    }, 0);
  }

  const colors = [
    "#44f2c5",
    "#88e6f7",
    "#046dd0",
    "#05cff7",
    "#b5f1fd",
    "#eb9b6d",
    "#fdbd00",
  ];

  const sourceData =
    type == 1
      ? [
        {
          name: "五级",
          value: 8,
        },
        {
          name: "四级",
          value: 21,
        },
        {
          name: "三级",
          value: 40,
        },
        {
          name: "二级",
          value: 69,
        },
        {
          name: "一级",
          value: 32,
        }]
      : [
        {
          name: "五级",
          value: 54,
        },
        {
          name: "四级",
          value: 87,
        },
        {
          name: "三级",
          value: 829,
        },
        {
          name: "二级",
          value: 195,
        },
        {
          name: "一级",
          value: 41,
        }
      ];
  const total = sourceData.reduce((num, item) => {
    num += item.value;
    return num;
  }, 0);

  // 内环间隔距离
  const inSplitWidth = 3;
  // 为了实现内环间隔距离，需要额外插入的数值。200 只是个系数，值越大，单位间隔的距离越小。
  const inSplitValue = Math.floor(total / (300 / inSplitWidth));

  // 外环间隔比内环间隔大的值
  const itemSplitWidth = 2;
  // 外环间隔距离
  const outSplitWidth = inSplitWidth + itemSplitWidth;
  // 为了实现外环间隔距离，需要额外插入的数值。
  const outSplitValue = Math.floor(total / (300 / outSplitWidth));

  // 内环数据的总数
  const valueTotal = total + inSplitValue * sourceData.length;

  function getTextAngle(currentAngle, angle) {
    currentAngle = currentAngle + angle;
    if (currentAngle <= 90) {
      return -currentAngle;
    } else if (currentAngle <= 180 && currentAngle > 90) {
      return 180 - currentAngle;
    } else if (currentAngle < 270 && currentAngle > 180) {
      return 180 - currentAngle;
    } else if (currentAngle < 360 && currentAngle >= 270) {
      return 360 - currentAngle;
    }
  }

  // 内环数据。在原数据的后面添加间隔数据（间隔块设置颜色透明）
  const valueData = sourceData.reduce((arr, item) => {
    const currentTotal = arr.reduce((total, item) => {
      total += item.value;
      return total;
    }, 0);

    const currentAngle = 360 * (currentTotal / valueTotal);
    const angle = (360 * (item.value / valueTotal)) / 2;
    arr.push(
      {
        name: item.name,
        value: item.value,
        // ...其他配置...
      },
      {
        name: "", // 分割线数据项
        value: inSplitValue,
        itemStyle: {
          color: "transparent",
          opacity: 0,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        // 设置tooltip不显示
        tooltip: {
          show: false,
        },
      }
    );
    return arr;
  }, []);

  const itemReduced = outSplitValue - inSplitValue;
  // 外环数据
  const outValueData = sourceData.reduce((arr, item, index) => {
    const currentTotal = arr.reduce((total, item) => {
      total += item.value;
      return total;
    }, 0);

    const currentAngle = 360 * (currentTotal / valueTotal);
    const angle = (360 * (item.value / valueTotal)) / 2;
    arr.push(
      {
        name: item.name,
        value: item.value - itemReduced,
        // ...其他配置...
      },
      {
        name: "", // 分割线数据项
        value: outSplitValue,
        itemStyle: {
          color: "transparent",
          opacity: 0,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        // 设置tooltip不显示
        tooltip: {
          show: false,
        },
      }
    );

    return arr;
  }, []);

  const option = {
    tooltip: {
      trigger: "item",
      zlevel: 1,
      axisPointer: {
        lineStyle: {
          color: "rgba(255,255,255,.5)",
        },
      },
      backgroundColor: "rgba(33, 51, 67, 1)",
      borderColor: "rgba(255,255,255,0)",
      textStyle: {
        color: "#fff",
      },
      formatter: (params, ticket, callback) => {
        if (params.name === '') return ''; // Skip separators in tooltip

        const actualTotal = getActualTotal(sourceData); // Use the actual total
        const percentage = (params.value / actualTotal) * 100;

        setGlobalData(params, "home1");
        return `${params.name}:${percentage.toFixed(1)}%`;
      },
    },
    color: colors,
    //图例组件
    legend: {
      show: true,
      type: "scroll",
      orient: "vertical",
      right: "3%",
      top: "center",
      icon: "diamond", //设置为圆，删除则为矩形
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 25,
      data: sourceData,
      formatter: function (name) {
        const actualTotal = getActualTotal(sourceData); // Use the actual total
        let target = 0;
        for (let i = 0; i < sourceData.length; i++) {
          if (sourceData[i].name === name) {
            target = sourceData[i].value;
            break;
          }
        }
        let percentage = (target / actualTotal) * 100;
        let arr = [
          "{rate|" + percentage.toFixed(0) + "%}",
          "{name|" + name + "}",
        ];
        return arr.join("  ");
      },
      textStyle: {
        rich: {
          name: {
            width: 120,
            fontSize: 14,
            fontWeight: 400,
            verticalAlign: "top",
            padding: [4, 0, 0, 4],
            color: "#FFB525",
            fontFamily: "Source Han Sans CN-Regular",
          },
          rate: {
            width: 70,
            fontSize: 15,
            padding: [5, 0, 0, 30],
            color: "#EDFDFF",
            fontFamily: "Source Han Sans CN",
          },
        },
      },
    },
    series: [
      {
        type: "pie",
        data: valueData,
        label: {
          show: false,
        },
        itemStyle: {
          opacity: 0.3,
        },
        labelLine: {
          show: false,
        },
        blur: {
          itemStyle: {
            opacity: 1,
          },
        },
        radius: ["0%", "0%"],
        center: ['25%', '50%'],
      },
      {
        type: "pie",
        startAngle: -360 * (itemReduced / 2 / valueTotal) + 90,
        radius: ["60%", "75%"],
        center: ['25%', '50%'],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
          length: 10,
        },
        data: outValueData,
      },
    ],
  };
  return option;
};